<template>
  <div class="product-list">
      <ul class="clearfix">
        <li  @click="selectItem(item)" v-for="(item,index) in data" class="item" :key="index">
            <a class="details" href="javascript:;">
                <img  width="165" height="186" v-lazy="item.image">
                <div class="transparent">
                    <div class="title"  v-html="item.title"></div>
                    <div class="red"><span class="price">￥</span><span v-html="item.price"></span></div>
                </div>
            </a>
        </li>                                   
      </ul>
  </div>
</template>
<script>
  export default {
    props: {
      data: {
        type: Array,
        default: []
      }
    },
    methods: {
      selectItem(item) {
        this.$emit('select', item)
      }        
    }
  }
</script>
<style scoped lang="scss" rel="stylesheet/css">
  @import "~common/scss/variable.scss";
/*商品列表*/
    .product-list{
        max-width: 640px;
        
        margin: 0 2%;
        overflow:hidden;
        .item{
            float: left;
            width: 50%;
            height: 186px;
            margin: 10px 0;
            position: relative;
            .details{
                display: inline-block;
                width: 165px;
                height: 186px;
                margin: auto;   
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                  .transparent{
                      position:absolute;
                      width:100%;
                      bottom:0;
                      background-color:rgba(255,255,255,0.5);
                      border-bottom-right-radius:2px;
                      border-bottom-left-radius:2px;
                  }                          
            }        
        }
    }
    .transparent{
      .title{
          font-size:$font-size-small;
          color:$color-text-d;
          text-overflow:ellipsis;
          white-space:nowrap;
          overflow:hidden;
          width:95%;
          margin:5px auto 0;
          height:24px;
          line-height:24px;
          text-align: left;
      }
      .red{
          width:95%;
          margin:0 auto;
          text-overflow:ellipsis;
          white-space:nowrap;
          overflow:hidden;
          font-size: 14px;
          line-height:16px;
          text-align: left;
          .price{
              font-size:$font-size-small-s ;
          }       
      }
     
    }    

</style>